<template>
	<BaseContainer>
		<el-tabs v-model="activeName" class="demo-tabs" @tab-click="onTabClick" tabPosition="left">
			<el-tab-pane v-for="(item, index) in tabs" :key="index" :label="item.label" :name="item.name">
				<component v-if="tabName == item.name" :is="item.component"></component>
			</el-tab-pane>
		</el-tabs>
	</BaseContainer>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue'

import dataManageSetting from './dataManageSetting/index.vue'
import dpConfigSetting from './dpConfigSetting/index.vue'
import clockInConfig from './clockInConfig/index.vue'
import quickDataConfig from './quickDataConfig/index.vue'

let activeName = ref('1')
const crud = ref()
const tabs = [
	{ label: '数据管理设置', name: '1', component: dataManageSetting },
	{ label: '数据更新设置', name: '2', component: dpConfigSetting },
	{ label: '有效打卡设置', name: '3', component: clockInConfig },
	{ label: '快速数据统计设置', name: '4', component: quickDataConfig },
]
let tabName = ref('1')
const onTabClick = (tab) => {
	tabName = tab.props.name
	nextTick(() => {
		crud.value?.refreshChange({ dataType: tab.props.name })
	})
}
</script>

<style scoped lang="scss">
:deep(.el-tabs__header) {
	background: rgba(0,0,0,0) !important;
}
</style>
